<template>
    <div class="collect">
        
        <div class="classify">
          <ul>
              <router-link to="/usercenter">
                <li class="iconfont"><a href="###">&#xe616;个人信息</a></li>
              </router-link>
              <router-link to="/like">
                <li class="iconfont"><a href="#/like">&#xe686;我的关注</a></li>
              </router-link>
              <router-link to="/fans">
                <li class="iconfont"><a href="###">&#xe6cf;我的粉丝</a></li>
              </router-link>
              <router-link to="/collect">
                <li class="iconfont active"><a href="###" class="active">&#xe60c;我的收藏</a></li>
              </router-link>
              <router-link to="/myblog">
                <li class="iconfont"><a href="###">&#xe6af;我的博客</a></li>
              </router-link>
              <router-link to="/myvideo">
                <li class="iconfont"><a href="###">&#xe64e;我的视频</a></li>
              </router-link>
              <router-link to="/mybook">
                <li class="iconfont"><a href="###">&#xe777;我的书籍</a></li>
              </router-link>
              
          </ul>
        </div>

        <div class="main">

        <div class="sort">

          <div>
            <a href="###"><span @click="blog()">博客</span><i style="color:#26a2ff;font-size:.5rem;">{{this.list.length}}</i></a>
            <a href="###"><span @click="video()">视频</span><i style="color:#26a2ff;font-size:.5rem;">{{this.listr.length}}</i></a>
            <a href="###"><span @click="book()">书籍</span><i style="color:#26a2ff;font-size:.5rem;">{{this.listb.length}}</i></a>
          </div>

          <div>
            <div v-show="show1" class="block1"></div>
            <div v-show="show2" class="block2"></div>
            <div v-show="show3" class="block3"></div>
          </div>

        </div>
        
        <div class="login" v-show="login">
          <a href="/#/login">还未登录，请先登录！</a>
        </div>

        <div v-show="main">
          <div v-show="show1" class="single">
          <ul>
            <li class="show1" v-show="shows[index]" v-for="(item,index) in list" :key="item.index">
              <router-link :to='"/userdetails/" + item.user.id'>
              <span class="person">
                <div>
                 
                  <img :src="item.user.photo" alt="">
                 
                </div>
                <p><a href="">{{item.user.name}}</a></p>
              </span>
              </router-link>
            
              <span class="content">
                <p>
                  <router-link :to='"/blogdetails/" + item.blog.id'>
                  <a href="###" class="a">{{item.blog.title}}</a>
                  </router-link>
                  <a href="###" class="iconfont" @click="del(index)">&#xe66e;</a>
                </p>
                <router-link :to='"/blogdetails/" + item.blog.id'>
                <div class="ql-snow ql-editor" v-html="item.blog.content">{{item.blog.content}}</div>
                </router-link>
              </span>
            
            </li>

          </ul>
        </div>

        <div v-show="show2" class="single">

          <ul>
            <li class="show3" v-show="showr[index]" v-for="(item,index) in listr" :key="item.index">
            <div class="user">
              <router-link :to='"/userdetails/" + item.user.id'>
              <img :src="item.user.photo" alt="">
              
              <a href="/#/userdetails">{{item.user.name}}</a>
              </router-link>
            </div>
            <div class="photo">
              <img :src="item.resource.photo" alt="">
              
            </div>
            <div class="message">
              <p>名字： {{item.resource.name}}</p>
              <p>路径：{{item.resource.path}}<a href="###"></a></p>
              <p>上传时间：{{item.resource.createtime}}</p>
              
              <p>简介：{{item.resource.introduction}}</p>
              
              
            </div>
            <a href="###" class="iconfont delete" title="删除" @click="collect(index)">&#xe651;</a>
          </li>

          </ul>
        </div>

        <div v-show="show3" class="single">
          <ul>
            <li class="show3" v-show="showb[index]" v-for="(item,index) in listb" :key="item.index">
            <div class="user">
              <router-link :to='"/userdetails/" + item.user.id'>
              <img :src="item.user.photo" alt="">
              
              <a href="/#/userdetails">{{item.user.name}}</a>
              </router-link>
            </div>
            <div class="photo">
              <img :src="item.resource.photo" alt="">
              
            </div>
            <div class="message">
              <p>书名: {{item.resource.name}}</p>
              <p>路径：{{item.resource.path}}<a href="###"></a></p>
              <p>上传时间：{{item.resource.createtime.slice(0,10)}}</p>
              <p>简介：{{item.resource.introduction}}</p>
              
            </div>
          
            <a href="###" class="iconfont delete" title="删除" @click="delbook(index)">&#xe651;</a>

            
          </li>

          </ul>
        </div>
        </div>

      </div>

      <div class="mark"  v-show="isshow">
          <p>确定删除？</p>
          <span><a href="###" @click="no()">取消</a></span>
          <span><a href="###" @click="dele()">确定</a></span>
      </div>

      <div class="mark"  v-show="isShow">
          <p>确定删除？</p>
          <span><a href="###" @click="No()">取消</a></span>
          <span><a href="###" @click="yes()">确定</a></span>
      </div>

      <div class="mark"  v-show="Isshow">
          <p>确定删除？</p>
          <span><a href="###" @click="NO()">取消</a></span>
          <span><a href="###" @click="Yes()">确定</a></span>
      </div>

    </div>
</template>

<script>
import qs from 'qs'
import axios from 'axios'
import Vue from 'vue'
export default {
    name: 'collect',
    data() {
      return {
        show1: true,
        show2: false,
        show3: false,
        isshow: false,
        isShow: false,
        Isshow: false,
        login: true,
        main: false,
        list: [],
        listr: [],
        listb: [],
        shows: [],
        showr: [],
        showb: [],
        showc: [],
        listp: [],
        index: '',
        indexr: '',
        indexb: '',
        sendmess: '',
      }
    },

    methods: {
      blog() {
        this.show1 = true

        this.show2 = false
        this.show3 = false
      },

      video() {
        this.show2 = true

        this.show1 = false
        this.show3 = false
      },

      book() {
        this.show3 = true

        this.show1 = false
        this.show2 = false
      },

      del (index) {
        this.isshow = true
        this.index = index
      },

      no () {
        this.isshow = false
      },

      dele () {
        this.isshow = false
        this.shows[this.index] = !this.shows[this.index]
        let newItem = this.shows[this.index]
        Vue.set(this.shows, this.index, newItem)

        let postData = qs.stringify({
          bid: this.list[this.index].blog.id,
          favorite: 1,
        })

        axios.post(`/api/favoriteB`, postData, {headers:{'Content-type': 'application/x-www-form-urlencoded'}}).then((response) => {

          if (response.status === 200) {
            console.log(response.data)
            console.log(this.list)
          } 

        })

        axios.post(`/api/favoriteBlog`, {headers:{'Content-type': 'application/x-www-form-urlencoded'}}).then((response) => {

          if (response.status === 200) {
            this.list = response.data
            for (var i = 0;i < this.list.length; i++) { 
            this.shows.push(true)
            }
            // console.log(this.shows)
            // console.log(this.icons)
            console.log(this.list)
          } 

        })

      },

      collect (index) {
        this.isShow = true
        this.indexr = index
      },

      No () {
        this.isShow = false
      },

      yes () {
        this.isShow = false
        this.showr[this.indexr] = !this.showr[this.indexr]
        let newItem = this.showr[this.indexr]
        Vue.set(this.showr, this.indexr, newItem)

        let postData = qs.stringify({
          rid: this.listr[this.indexr].resource.id,
          favorite: 1,
        })

        axios.post(`/api/favoriteR`, postData, {headers:{'Content-type': 'application/x-www-form-urlencoded'}}).then((response) => {

          if (response.status === 200) {
            console.log(response.data)
            console.log(this.listr)
          } 

        })

        let Data = qs.stringify({
          type: 0,
        })

        axios.post(`/api/favoriteResource`, Data, {headers:{'Content-type': 'application/x-www-form-urlencoded'}}).then((response) => {

          if (response.status === 200) {
            this.listr = response.data
            for (var i = 0;i < this.listr.length; i++) { 
            this.showr.push(true)
            }
            // console.log(this.shows)
            // console.log(this.icons)
            console.log(this.listr)
          } 

        })
      },

      delbook (index) {
        this.Isshow = true
        this.indexb = index
      },

      NO () {
        this.Isshow = false
      },

      Yes () {
        this.Isshow = false
        this.showb[this.indexb] = !this.showb[this.indexb]
        let newItem = this.showb[this.indexb]
        Vue.set(this.showb, this.indexb, newItem)

        let postData = qs.stringify({
          rid: this.listb[this.indexb].resource.id,
          favorite: 1,
        })

        axios.post(`/api/favoriteR`, postData, {headers:{'Content-type': 'application/x-www-form-urlencoded'}}).then((response) => {

          if (response.status === 200) {
            console.log(response.data)
            console.log(this.listb)
          } 

        })

        let postDatab = qs.stringify({
          type: 1,
        })

        axios.post(`/api/favoriteResource`, postDatab, {headers:{'Content-type': 'application/x-www-form-urlencoded'}}).then((response) => {

          if (response.status === 200) {
            this.listb = response.data
            for (var i = 0;i < this.listb.length; i++) {
            this.showb.push(true)
            this.showc.push(false)
            }
            // console.log(this.showb)
            // console.log(this.icons)
            console.log(this.listb)
          } 

        })

      },

      showcom (index) {
        if (this.showc[index] == false) {
          this.showc[index] = !this.showc[index]
          let newItem = this.showc[index]
          Vue.set(this.showc, index, newItem)

        } else {
          this.showc[index] = !this.showc[index]
          let newItem = this.showc[index]
          Vue.set(this.showc, index, newItem)

        }

        let postData = qs.stringify({
          page: 1,
        })

          let id = this.list[index].id

        axios.post(`/api/resource/${id}/comments`, postData, {headers:{'Content-type': 'application/x-www-form-urlencoded'}}).then((response) => {

          if (response.status === 200) {
            this.listp = response.data
            console.log(this.listp)
          } 
        })
      },

      send (index) {

        let postData = qs.stringify({
          message: this.sendmess,
        })

        let id = this.list[index].id

        axios.post(`/api/resource/${id}/write`, postData, {headers:{'Content-type': 'application/x-www-form-urlencoded'}}).then((response) => {

          if (response.status === 200) {
          
            console.log(response.data)
          } 

        })
        // this.$router.go(0)
      },
    },

    created () {
      axios.post(`/api/user/getUser`, {headers:{'Content-type': 'application/x-www-form-urlencoded'}}).then((response) => {

        if (response.status === 200) {
          if (response.data !== "") {
            this.main = true
            this.login = false
            console.log(this.login)
          }
        } 

      })

      axios.post(`/api/favoriteBlog`, {headers:{'Content-type': 'application/x-www-form-urlencoded'}}).then((response) => {

        if (response.status === 200) {
          this.list = response.data
          for (var i = 0;i < this.list.length; i++) {
        
           this.shows.push(true)
          }
          // console.log(this.shows)
          // console.log(this.icons)
          console.log(this.list)
        } 

      })

      let postData = qs.stringify({
        type: 0,
      })

      axios.post(`/api/favoriteResource`, postData, {headers:{'Content-type': 'application/x-www-form-urlencoded'}}).then((response) => {

        if (response.status === 200) {
          this.listr = response.data
          for (var i = 0;i < this.listr.length; i++) {
          
           this.showr.push(true)
          }
          // console.log(this.shows)
          // console.log(this.icons)
          console.log(this.listr)
        } 

      })

      let postDatab = qs.stringify({
        type: 1,
      })

      axios.post(`/api/favoriteResource`, postDatab, {headers:{'Content-type': 'application/x-www-form-urlencoded'}}).then((response) => {

        if (response.status === 200) {
          this.listb = response.data
          for (var i = 0;i < this.listb.length; i++) {
          
           this.showb.push(true)
           this.showc.push(false)
          }
          // console.log(this.showb)
          // console.log(this.icons)
          console.log(this.listb)
        } 

      })

    },
}
</script>

<style lang="stylus" scoped>
.collect
  width 100%
  height auto
  position relative
  .classify
    width 15%
    height auto
    margin-top 5rem
    margin-left 1%
    position fixed
    border 1px #ccc solid
    border-radius 10px
    box-shadow: 0 0 0.266667rem rgba(131, 171, 175, 0.5);
    background-color #fff
    ul
      padding-top 2rem
      padding-bottom 4rem
      margin-top .5rem
      // background-color red
      li
        width 100%
        margin-top .2rem
        line-height 4rem
        text-align center
        // background-color #fff
      li:hover
        //background-color #26a2ff
        background-color #eee
      .active
        background-color #eee
        color #26a2ff
  .main
    width 82%
    min-height 38rem
    top 4rem
    margin-left 17%
    margin-bottom 2rem
    font-size .9rem
    position absolute
    overflow hidden
    background-color #fff
    .sort
      width 82%
      height 4rem
      position fixed
      z-index 1
      border-bottom .05rem #ccc solid
      background-color #fff
      span
        width 4%
        line-height 1.5rem
        text-align center
        display inline-block
        margin-top 1.5rem
        margin-left 3rem
        // background-color red
      .block1
        width 4%
        height .2rem
        position absolute
        margin-top .8rem
        border-radius 20%
        margin-left 3rem
        display inline-block
        background-color skyblue
      .block2
        width 4%
        height .2rem
        position absolute
        margin-top .8rem
        border-radius 20%
        margin-left 9.6rem
        display inline-block
        background-color skyblue
      .block3
        width 4%
        height .2rem
        position absolute
        margin-top .8rem
        border-radius 20%
        margin-left 16.3rem
        display inline-block
        background-color skyblue
    .login
      width 100%
      line-height 33rem
      top 4.1rem
      margin-bottom 2rem
      text-align center
      font-size 1rem
      position absolute
      background-color #fff
      a
        color red
      a:hover
        color #26a2ff
    .single
      min-height 36rem
      margin-top 4rem
      // background-color red
      ul
        height auto
        padding-top 1rem
        padding-left 1rem
        padding-bottom 2rem
        // background-color red
        .show1
          width 95%
          margin-top 1rem
          padding .5rem
          padding-left 1rem
          position relative
          border .05rem #eee solid
          box-shadow: 0 0 0.266667rem rgba(131, 171, 175, 0.5);
          // background-color red
          .person
            width 8%
            display inline-block
            // background-color red
            div
              width 100%
              height 3.5rem
              // background-color skyblue
              img 
                height 100%
                margin-left .75rem
                border-radius 50%
            p
              width 100%
              margin-top .5rem
              line-height 1rem
              text-align center
              // background-color red
          .content
            width 90%
            height 90%
            display inline-block
            position absolute 
            // background-color skyblue
            p
              width 100%
              line-height 2rem
              font-size 1rem
              // background-color red
              .a
                color #26a2ff
              .iconfont
                left 97%
                top .1rem
                font-size 1.3rem
                position absolute
                // background-color red
            div
              width 100%
              font-size .8rem
              height 3rem
              line-height 1.4rem
              display: -webkit-box; 
              word-break: break-all;
              -webkit-box-orient: vertical;
              -webkit-line-clamp:2;
              overflow: hidden;
              text-overflow:ellipsis;
        
        .show3
          width 96%
          margin-left 2%
          margin-top 1rem
          position relative
          border .05rem #eee solid
          border-radius 10px
          box-shadow: 0 0 0.266667rem rgba(131, 171, 175, 0.5);
          background-color #fff
          .user
            width 6%
            height 4rem
            top -1.5rem
            position absolute
            // background-color skyblue
            img
              height 2.5rem
              margin-left 0%
              border-radius 50%
              box-shadow: 0 0 0.266667rem rgba(131, 171, 175, 0.5);
            a
              width 100%
              position absolute 
              left 0
              top 2.5rem
              text-align center
              font-size .7rem
              // background-color red
          .photo
            width 6%
            height 4rem
            left 8%
            position absolute
            // background-color red
            top 1rem
            img 
              width 100%
              margin-left 0%
              box-shadow 0 0 0.266667rem rgba(131, 171, 175, 0.5)
          .message
            width 70%
            height auto
            margin-left 15%
            padding-top .8rem
            padding-bottom .5rem
            position relative
            // background-color red
            p
              line-height 1.5rem
              position relative
              font-size .8rem
              // background-color red
              img
                height 1.5rem
                border-radius 50%
              a
                position absolute 
                left 2rem
                top .2rem
                font-size .7rem
            .icons
              width 100%
              height 1.5rem
              background-color skyblue
              span 
                width 10%
                display inline-block
                font-size 1rem
                // background-color red
                margin-right 5%
                i 
                  font-size .8rem
          a
            position absolute
            top 40%
            left 90%
            font-size 1.5rem
            // background-color red
          .delete:hover
            color red
          .comment
            width 100%
            height auto
            margin-top 2rem
            position relative
            border-top .1rem #ccc solid
            // background-color red
            ul
              margin-top .5rem
              height auto
              li
                width 90%
                font-size .8rem
                margin-bottom .5rem
                margin-left 5%
                background-color #f5f6f7
                p
                  width 100%
                  text-indent .6rem
                  img
                    height 1.5rem
                    border-radius 50%
                  i
                    font-size .7rem
                    color #ccc
                input 
                  width 84%
                  position absolute
                  bottom .2rem
                  text-indent .5rem
                  font-size .8rem
                  border .05rem #ccc solid
                span
                  padding 0rem 1rem
                  position absolute
                  bottom .2rem
                  margin-left 84%                
                  border .05rem #ccc solid
                  background-color #fff
                  a
                    color #26a2ff
                span:hover
                  background-color skyblue
                  a
                    color #fff
  .mark
    width 20%
    height 8rem
    position absolute 
    top 15rem
    left 45%
    border 1px #ccc solid
    border-radius 10px
    box-shadow: 0 0 0.266667rem rgba(131, 171, 175, 0.5);
    background-color #fff
    p
      width 100%
      line-height 3rem
      font-size 1.2rem
      text-align center
      margin-top .5rem
      //   background-color #fff
    span 
      line-height 4rem
      padding .8rem
      margin-left 20%
      font-size .8rem
      background-color #fff
</style>